<!--
 * @Author: zjj
 * @Date: 2020-01-13 10:04:31
 * @LastEditors  : zjj
 * @LastEditTime : 2020-01-13 16:53:36
 -->
<!--  -->
<template>
  <div class="download">
    <Nav title="下载页面"></Nav>
    <div class="body">
      <div class="flex justify-center">
        <span class="logo"></span>
      </div>
      <div class="title">融媒优品</div>
      <div class="title-tip">官媒品牌，优选好物</div>
      <div class="app-select flex justify-center">
        <div class="item flex justify-center aligin-center" @click="iosDownload">
          <span class="icon-iphone"></span>
          <span>iPhone 下载</span>
        </div>
        <div class="item flex justify-center aligin-center" @click="androidDownload">
          <span class="icon-android"></span>
          <span>Android 下载</span>
        </div>
      </div>
      <div class="bg"></div>
    </div>
    <div class="info" v-if="tipFlag">
      <div class="J-weixin-tip weixin-tip">
        <div class="weixin-tip-content">请在菜单中选择在浏览器中打开</div>
      </div>
      <div class="btn flex justify-center aligin-center" @click="tipFlag=false">我知道了</div>
    </div>
  </div>
</template>

<script>
import Nav from "../components/Nav";
import Logo from "../assets/imgs/logo@2x.png"
import {downLoad} from "../api/api"
export default {
  components: { Nav },
  data() {
    return {
      tipFlag: false
    };
  },
  computed: {},
  watch: {},
  methods: {
     _shareConfig(jsk) {
      // jsk.debug=true
      wx.config(jsk);
      wx.ready(() => {
        wx.updateTimelineShareData({
          title: "免费安装下载APP，融媒优品，体验兰溪味道", // 分享标题
          link:
            window.location.origin +
            window.location.pathname, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: Logo, // 分享图标
          success: function() {
            // 设置成功
          }
        });
        wx.updateAppMessageShareData({
          title: "免费安装下载APP，融媒优品，体验兰溪味道", // 分享标题
          link:
            window.location.origin +
            window.location.pathname, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          desc:
           "融媒优品，体验兰溪味道", // 分享描述
          imgUrl: Logo, // 分享图标
          success: function() {
            // 设置成功
          }
        });
      });
      wx.error(res => {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
    },
    iosDownload() {
      location.href =
        "https://apps.apple.com/cn/app/%E9%A2%84%E8%B4%AD%E6%B4%BE/id1457812117";
    },
    androidDownload() {
      var ua = navigator.userAgent.toLowerCase();
      var tip = document.querySelector(".weixin-tip");
      var tipImg = document.querySelector(".J-weixin-tip-img");
      if (ua.indexOf("micromessenger") != -1) {
        this.tipFlag = true;
      } else {
        location.href = "https://cdn.weile999.com/download/app-release.apk";
      }
    }
  },
  created() {},
  mounted() {
    downLoad().then(({data:{result}})=>{
       // 分享
        if (typeof wx != "undefined") {
            this._shareConfig(result.jsk);
        }
    })
    
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.download {
  height: 100%;
  .body {
    padding-top: 8px;
    box-sizing: border-box;
    height: calc(100% - 45px);
    background: #cc2722;
    .logo {
      height: 62px;
      width: 62px;
      background: url("../assets/imgs/logo@2x.png");
      background-size: 100% 100%;
    }
    .title {
      margin-top: 12px;
      text-align: center;
      color: #fff;
      font-size: 18px;
      line-height: 24px;
    }
    .title-tip {
      font-size: 14px;
      line-height: 24px;
      text-align: center;
      color: #fff;
    }
    .app-select {
      margin: 27px 27px 0;
      .item {
        width: 150px;
        height: 40px;
        font-size: 14px;
        color: #fff;
        border: 2px solid rgba(255, 255, 255, 1);
        border-radius: 20px;
        &:first-child {
          margin-right: 20px;
        }
        .icon-android {
          margin-right: 13px;
          width: 22px;
          height: 28px;
          background: url("../assets/imgs/android.png");
          background-size: 100% 100%;
        }
        .icon-iphone {
          margin-right: 13px;
          width: 22px;
          height: 26px;
          background: url("../assets/imgs/iphone.png");
          background-size: 100% 100%;
        }
      }
    }
    .bg {
      margin-top: 24px;
      height: 388px;
      width: 318px;
      background: url("../assets/imgs/download_bg.png");
      background-size: 100% 100%;
    }
  }
  .info {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
  }
  .btn {
    color: #fff;
    margin: 10px auto;
    width: 70px;
    height: 25px;
    border-radius: 5px;
    border: 1px dashed #fff;
  }
  .weixin-tip-content {
    font-size: 16px;
    letter-spacing: 5px;
    font-weight: bold;
    line-height: 20px;
  }
  .weixin-tip {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    width: 265px;
    padding: 55px 0 0;
    margin: 0 auto;
    text-align: center;
    background: url()
      no-repeat right top;
    background-size: 45px 68px;
  }

  .weixin-tip-img {
    padding: 110px 0 0;
  }

  .weixin-tip-img::after {
    display: block;
    margin: 15px auto;
    content: " ";
    background-size: cover;
  }
}
</style>